<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表格按钮</title>
    <script src="../lib/easytable.js"></script>
    <link type="text/css" rel="stylesheet" href="../lib/easytable.css" />
    <script>
        let table;
        window.onload = function () {
            let option = {
                cols: [{ title: '名字', field: 'name', editable: true },
                { title: '学号', field: 'num' }, { title: '成绩', field: 'mark' }, { title: '性别', field: 'sex' }, { title: '操作', type: 'button', buttons: [{ text: '查看' }, { text: '删除' }] }],
                data: [{ name: 'yh', num: 123, mark: 99, sex: '男' }, { name: 'ca', num: 456, mark: 87, sex: '男' }, { name: 'bm', num: 789, mark: 60, sex: '男' }]
            }

            option.cols[4].buttons[0].click = function (col, rawData, index, tabelObj) {
                alert(JSON.stringify(rawData));

            }
            option.cols[4].buttons[1].click = function (col, rawData, index, tabelObj) {
                tabelObj.deleteRaw(index);
                tabelObj.render();
            }

            table = new easytable("table", option);
        }
        function appendEmpty() {
            table.appendRaw();
        }
        function appendDef() {
            let rawData = { name: 'xx', num: 789, mark: 54, sex: '女' }
            table.appendRaw(rawData);
        }
        function del() {
            let indexArr = table.getSelectedIndex();
            table.deleteRaws(indexArr);
        }
    </script>
</head>

<body>
    <button onclick="appendEmpty()">新增空行</button>
    <button onclick="appendDef()">新增自定义行</button>
    <div id='table'></div>
</body>

</html>